<template>
  <div>
    <ul>
      <li
        v-for="(i, item) in arr"
        :key="item"
        :class="{ yanse: item == atmitem }"
        @click="bianse(item)"
      >
        {{ i }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isziti: true,
      arr: ["刘", "迪迦", "塞罗", "盖亚", "泰罗"],
      atmitem: 0,
    };
  },
  methods: {
    bianse(item) {
      this.atmitem = item;
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.active {
  background: yellow;
}
.kd {
  width: 200px;
  height: 200px;
}
.ziti {
  font-size: 40px;
}
.yanse {
  background: red;
}
.huangse {
  background: yellow;
}
</style>